<template>
<div class="ygbh-menu">
	<ul class="group-item" v-for='groupItem in listData' :key="groupItem.Basic">
		<div class="group-item-title">{{groupItem.title}}</div>
		<ul class="group-hash-list">
			<li class="group-hash-item" v-for='hashItem in groupItem.children' :key='hashItem.menuUrl'>
				<router-link :to="hashItem.menuUrl">{{hashItem.title}}</router-link>
			</li>
		</ul>
	</ul>
</div>
</template>

<script>
import menuList from '../common/menuList'

export default {
	name: 'Ygbhmenu',
	props: {
		msg: String
	},
	data () {
		return {
			listData: menuList,
		};
	},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ygbh-menu .group-item-title{ font-size: 12px; color: #999; line-height: 26px; margin-top: 15px; }
.ygbh-menu .group-hash-item a{ line-height: 40px; font-size: 14px; text-decoration: none; color: #444; overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.ygbh-menu .group-hash-item a:hover, .ygbh-menu .group-hash-item a.router-link-exact-active{ color: #409eff; }
</style>
